/* components */
import { 
  BaseSelectUserSearchUserPanel, 
  BaseSelectUserSelectPanel, 
  BaseSelectUserSelectedPanel,
  BaseSelectUserSearchHeader
} from '@src/component/common/BaseSelectUser/components'
/* enum */
import { BaseSelectUserComponentNameEnum } from '@src/component/common/BaseSelectUser/model'
/* hooks */
import { useBaseSelectUserOptions } from '@src/component/common/BaseSelectUser/hooks'
import { useBaseSelectUserStoreSearchKeyword } from '@src/component/common/BaseSelectUser/store'
/* scss */
import '@src/component/common/BaseSelectUser/components/SelectContent/index.scss'
/* vue */
// @ts-ignore
import { ComponentInstance, ComponentRenderProxy, computed, ComputedRef, defineComponent, PropType, ref } from 'vue'
import { CommonComponentInstance } from '@model/VC'
import { CreateElement } from 'vue'
/* util */
import { isFalse, isFalsy } from '@src/util/type'

export type SelectContentProps = {
  // 是否为多选
  isMulti: boolean;
}

export interface SelectContentSetupState {
  // 是否为单选
  isSingleChoice: ComputedRef<boolean>;
}

export enum SelectContentEmitEventNameEnum {
  Input = 'input',
  Confirm = 'confirm',
}

export type SelectContentInstance = ComponentInstance & SelectContentSetupState
export type SelectContentVM = ComponentRenderProxy<SelectContentProps> & CommonComponentInstance & SelectContentInstance

export default defineComponent({
  name: BaseSelectUserComponentNameEnum.BaseSelectUserSelectContent,
  emits: [
    SelectContentEmitEventNameEnum.Input,
    SelectContentEmitEventNameEnum.Confirm
  ],
  props: {
    /* 是否为多选状态 */
    isMulti: {
      type: Boolean as PropType<boolean>,
      default: false
    },
    onInput: {
      type: Function
    },
    onConfirm: {
      type: Function
    }
  },
  setup(props: SelectContentProps, { emit }) {
    
    const { isShowSearch, isHideSearch } = useBaseSelectUserOptions()
    
    /** 
     * @description 搜索关键字
    */
    const { keyword, setKeyword } = useBaseSelectUserStoreSearchKeyword()
    
    /* 是否为单选 */
    const isSingleChoice = computed(() => isFalsy(props.isMulti))
    
    const onKeywordChangeHandler = (value: string) => {
      setKeyword(value)
    }
    
    /** 
     * @description 是否处于搜索状态
    */
    const isSearching = computed(() => {
      return Boolean(keyword.value)
    })
    
    const isNotSearching = computed(() => {
      return isFalse(isSearching.value)
    })
    
    return {
      isSingleChoice,
      isSearching,
      isShowSearch,
      isHideSearch,
      isNotSearching,
      keyword,
      onKeywordChangeHandler
    }
    
  },
  render(h: CreateElement) {
    
    const classNames: string[] = [
      BaseSelectUserComponentNameEnum.BaseSelectUserSelectContent,
      this.isMulti ? 'base-select-user-select-content-multi' : '',
      this.isHideSearch ? 'base-select-user-select-content-hide-search' : ''
    ]
    
    // 选人面板组件
    const BaseSelectUserSelectComponent = (
      <div class="base-select-user-select-content-main">
        
        {/* start 搜索头部 */}
        <BaseSelectUserSearchHeader 
          keyword={this.keyword}
          v-show={this.isShowSearch}
          onInput={this.onKeywordChangeHandler}
        />
        {/* end 搜索头部 */}
        
        {/** 
         * 处于搜索状态时，只需要显示人员列表面板即可。
        */}
        <BaseSelectUserSearchUserPanel 
          v-show={this.isSearching} 
          keyword={this.keyword} 
          is-multi={this.isMulti} 
        />
        
        <BaseSelectUserSelectPanel 
          v-show={this.isNotSearching}
          is-multi={this.isMulti}
        />
        
      </div>
    )
    
    // 单选时只显示 选人面板，不需要显示 已选择面板
    if (this.isSingleChoice) {
      return BaseSelectUserSelectComponent
    }
    
    // 多选时需要显示 选人面板 和 已选择面板
    return (
      <div class={classNames}>
        
        { BaseSelectUserSelectComponent }
        
        <BaseSelectUserSelectedPanel />
        
      </div>
    )
  }
})
